<template>
    <div>
        <mt-header title="我的收藏">
            <router-link to="/" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="container">
            <div @click="go(item.houseId)" class="collect" v-for="(item, index) in list" :key="index">
                <div class="header">
                    <img class="img" :src="baseUrl + item.cover" item. alt="">
                </div>
                <div class="right">
                    <div class="title">
                        <div class="title-text">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="capacity">
                        <div class="capacity-people">
                            地址：{{ item.location }}
                        </div>
                    </div>
                    <div class="price">￥
                        <span class="price-text">
                            {{ item.price }}
                        </span>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            baseUrl: ''
        }
    },
    methods: {
        getList() {
            this.baseUrl = this.getBaseUrl()
            this.$axios({
                url: this.$api.collectList,
                method: 'get'
            }).then(res => {
                this.list = res.rows
                console.log(this.list[0]);
            })
        },
        go(id){
            this.$router.push({ name: 'hdetail', params: { jiu: id } })
        }
    },
    mounted() {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.container {
    text-align: start;
    display: flex;
    width: 100%;
    // justify-content: space-evenly;
    flex-wrap: wrap;

    .collect {
        margin-left: 15px;
        margin-top: 15px;
        display: flex;
        justify-content: start;

        // background-color: #fff;
        .img {
            width: 125px;
            height: 125px;
            border-radius: 10px;
        }

        .right {
            margin-top: 5px;
            margin-left: 15px;
            display: flex;
            flex-direction: column;

            .capacity-people {
                margin-top: 15px;
                color: gray;
            }

            .title-text {
                font-size: large;
                font-weight: 600;
            }

            .price {
                margin-top: 15px;
                color: #ec5d29;
                font-weight: 600;

                .price-text {
                    font-size: larger;
                }
            }


        }
    }
}
</style>